CARA MENGGUNAKAN BOOTSTRAP

1. Membuat Tabel Dengan Bootstrap

Bootstrap memberikan Anda kemudahan untuk membuat tabel tanpa harus mengetikkan berbaris-baris kode program. Anda hanya perlu memanggil class-class yang sudah ada di dalam file Bootstrap.

Di dalam file Bootstrap sudah terdapat beberapa class yang didesain untuk kebutuhan pembuatan tabel, antara lain “.table”, “.table-striped”, “.table-bordered”, dan “.table-hover”.

  • .table”: class yang digunakan untuk membuat dan mendefinisikan tabel biasa/standar. Class ini hanya menambahkan lapisan yang kecil dan pembatas secara horizontal. Class ini menggunakan baris kode <table class=”table”>.
  • .table-stripped”: class yang digunakan untuk membuat table dengan gaya yang zebra. Jadi warna setiap baris berselang seling. Class ini menggunakan baris kode <table class=”table table-sripped”>.
  • .table-bordered”: merupakan class yang digunakan untuk menampilkan border di dalam table. Jadi keseluruhan table akan dipasang sebuah border. Class ini menggunakan baris kode <table class=”table table-bordered”>.
  • .table-hover”: dapat Anda manfaatkan untuk memberikan efek hover pada sebuah row. Efek ini akan berjalan ketika Anda meletakkan mouse di row yang diberikan class ini. Class ini menggunakan baris kode <table class=”table table-hover”>.

Selain kumpulan class untuk mendesain table, terdapat beberapa class pewarnaan row tabel dan data menggunakan Bootstrap, yaitu “.success”, “.danger”, “.info”. “.warning”, dan “.active”.

2. Mengatur Tampilan Gambar Dengan Bootstrap

Anda juga dapat mendesain gambar menggunakan Bootstrap. Membuat gambar yang responsive, berbentuk round, lingkaran, dan juga thumbnail sangat mudah menggunakan framework ini.

Class “.img-responsive”, “.img-rounded”, ”img-circle”, dan ”img-thumbnail” adalah kumpulan class yang digunakan untuk memanipulasi gambar di Bootstrap. Kembangkan desain yang maksimal dan hadirkan gambar menarik di website Anda.

  • .img-responsive”: class ini memungkinkan Anda membuat gambar yang dapat dibuka di berbagai macam resolusi layar. Class .img-responsive membuka ukuran gambar dapat menyesuaikan dengan ukuran elemen inti. Anda dapat melihat efeknya ketika melakukan resize pada browser.
  • .img-rounded”: ketika Anda ingin membuat gambar dengan sisi melengkung, gunakan class ini, maka Anda akan memiliki gambar yang melengkung di bagian sisinya.
  • ”.img-circle”: terkadang ingin gambar yang berbentuk lingkaran, gunakan class ini dan gambar akan tampil dengan bentuk yang melingkar.
  • .img-thumbnail”: class ini digunakan untuk membuat gambar thumbnail dengan Bootstrap.
4. Membuat Tombol Dengan Bootstrap

Tombol adalah komponen yang umum dan sering digunakan untuk membuat website. Inilah yang membuat Bootstrap juga menyediakan class untuk membuat tombol yang menarik. Anda tinggal memanggil salah satu class tombol dan tombol yang indah dapat Anda tampilkan di halaman website.

Supaya Anda bisa menggunakan tombol di dalam website, cukup panggil class “btn”. Selain itu, Anda bisa menambahkan class lain untuk memberikan variasi tombol di dalamnya.

Terdapat banyak variasi tombol yang disediakan oleh Bootstrap, seperti “.btn”, “.btn-default”, “.btn-primary”, “.btn-success”, “.btn-info”, “.btn-warning”, “.btn-danger”, dan “.btn-link”.

5. Membuat Panel Dengan Bootstrap

Contoh terakhir penggunaan Bootstrap adalah membuat panel. Panel adalah sebuah garis yang terbentuk dari garis dan padding.

Di Bootstrap, sebuah panel terdiri dari tiga bagian; header, body, dan footer. Header berada di bagian atas. Body di bagian tengah atau inti. Sedangkan footer di bagian bawah.

Kebutuhan akan digital IT sangat dibutuhkan dalam kegiatan sehari-hari, Bead IT Consultant merupakan pilihan tepat sebagai partner anda,kunjungi website kami dengan klik link ini : www.beadgrup.com